<template>
    <u-popup :show.sync="showSignaturePad" mode="center"  :closeOnClickOverlay="false" >
      <view class="warrper">
        <div class="sign_box">
          <c-sign
            ref="cSign"
            style="width: 100%; height: 100%"
            :lineColor="lineColor"
            :lineWidth="lineWidth"
            :bgColor="bgColor"
          ></c-sign>
        </div>
        <view class="button_box">
          <view class="clear-button" @tap="clearPad">清空</view>
          <view class="warning-button" @tap="close">取消</view>
          <view class="save-button" @tap="finish">保存</view>
        </view>
      </view>
    </u-popup>
</template>

<script>
export default {
  props:{
    popupVisible:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showSignaturePad: false,
      signatureCallback: null,
      bgColor: "#fff",
      lineColor: "#000000",
      lineWidth: 3,
    };
  },
  mounted() {},
  methods: {
    finish() {
      this.$refs.cSign
        .save()
        .then((res) => {
          console.log(res);
          const dataUrl = res.tempFilePath;
          if (this.signatureCallback) {
            this.signatureCallback(dataUrl)
            this.close()
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err.errMsg,
            icon: "none",
          });
        });
    },
    //清空画布
    clearPad() {
      this.isEmpty = false;
      if(this.$refs.cSign){
        this.$refs.cSign.clear()
      }
    },
    open(callback) {
      this.showSignaturePad = true;
      this.signatureCallback = callback;
      this.clearPad();
    },
    close() {
      this.clearPad()
      this.showSignaturePad = false;
      this.$emit("update:popupVisible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.warrper{
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  width: 80vw;
  gap: 10px;
  .sign_box{
    background-color: #e8e7e7;
    height: 200px;
    border: 1px solid #c5c5c5;
  }
}

.button_box {
  height: 80rpx;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  font-size: 34rpx;
  font-weight: 600;
}

.save-button {
  color: #ffffff;
  width: 150rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background-color: #007aff;
}

.save-button {
  color: #ffffff;
  width: 150rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background-color: #007aff;
}

.clear-button {
  color: #ffffff;
  width: 150rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background-color: #aaaaaa;
}
.warning-button {
  color: #ffffff;
  width: 150rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background: #ff976a;
}
</style>
